<template>
  <a-spin :spinning="spinning">
    <dir class="add-payslip-one">
      <a-row class="content-top">
        <step :current="0" />
      </a-row>

      <a-row class="salary" type="flex" align="middle" justify="space-between">
        <a-col class="item" :span="9">
          <a-row type="flex" align="middle" justify="space-between">
            <a-col :span="8" @click="selectItem">
              <a-row>
                <strong class="nameStyle">总共</strong>
              </a-row>
              <a-row class="primary">{{ titles.countAll }}</a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />
            <a-col :span="6" @click="selectItem">
              <a-row>
                <strong class="sub_tit">企业员工</strong>
              </a-row>
              <a-row>{{ titles.countInCompany }}</a-row>
            </a-col>
            <a-col :span="6" @click="selectItem">
              <a-row>
                <strong class="sub_tit">非企业员工</strong>
              </a-row>
              <a-row>{{ titles.countNotInCompany }}</a-row>
            </a-col>
          </a-row>
        </a-col>
        <a-col class="item" :span="6">
          <a-row type="flex" align="middle" justify="space-between">
            <a-col :span="8" @click="selectItem">
              <a-row>
                <strong class="sub_tit">微信绑定</strong>
              </a-row>
              <a-row>{{ titles.countWeChatBind }}</a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />
            <a-col :span="6" @click="selectItem">
              <a-row class="ove">
                <strong class="sub_tit">微信未绑定</strong>
              </a-row>
              <a-row>{{ titles.countWeChatUnBind }}</a-row>
            </a-col>
          </a-row>
        </a-col>
        <a-col class="item" :span="7">
          <a-row type="flex" align="middle" justify="space-between">
            <a-col :span="8">
              <a-row>
                <strong class="sub_tit">应发工资</strong>
              </a-row>
              <a-row>{{ titles.sumSalaryAmount }}</a-row>
            </a-col>
            <a-divider style="height: 42px" type="vertical" />
            <a-col :span="6">
              <a-row>
                <strong class="sub_tit">实发工资</strong>
              </a-row>
              <a-row>{{ titles.sumSalaryReal }}</a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-table
        :scroll="{ x: 1500 }"
        :columns="columns"
        class="mg_t24"
        :pagination="pagination"
        :data-source="dataSource"
        :row-key="(r, i) => i"
        @change="handlePage"
      >
        <template slot="empInCompany" slot-scope="empInCompany">
          <xq-icon type="icon-wancheng2" v-if="empInCompany" class="primary_color w32 fs24" />
          <xq-icon type="icon-wancheng2" v-if="!empInCompany" style="font-size: 24px; color: #bfbfbf" />
        </template>
        <template slot="phoneStatus" slot-scope="phoneStatus">
          <xq-icon type="icon-wancheng2" v-if="phoneStatus" class="primary_color w32 fs24" />
          <xq-icon type="icon-wancheng2" v-if="!phoneStatus" style="font-size: 24px; color: #bfbfbf" />
        </template>
        <template slot="wechatStatus" slot-scope="wechatStatus">
          <xq-icon type="icon-wancheng2" v-if="wechatStatus" class="primary_color w32 fs24" />
          <xq-icon type="icon-wancheng2" v-if="!wechatStatus" style="font-size: 24px; color: #bfbfbf" />
        </template>
      </a-table>
      <a-row class="foot">
        <a-button type="primary" style="margin-right: 12px" @click="reUpload"> 重新上传 </a-button>
        <a-button @click="doNext">下一步</a-button>
      </a-row>
    </dir>
  </a-spin>
</template>

<script>
import { mapState } from "vuex";
const baseColumns = [
  { title: "姓名", width: 150, dataIndex: "empName" },
  {
    title: "企业员工",
    dataIndex: "empInCompany",
    width: 150,
    scopedSlots: { customRender: "empInCompany" }
  },
  {
    title: "手机",
    dataIndex: "phoneStatus",
    width: 150,
    scopedSlots: { customRender: "phoneStatus" }
  },
  {
    title: "微信",
    dataIndex: "wechatStatus",
    width: 150,
    scopedSlots: { customRender: "wechatStatus" }
  },
  {
    title: "手机号",
    dataIndex: "phone",
    width: 150
  },
  {
    title: "应发工资",
    dataIndex: "salaryAmount",
    width: 150
  },
  // {
  //   title: "个人社保",
  //   dataIndex: "empSoc",
  //   width: 150
  // },
  // {
  //   title: "个人公积金",
  //   dataIndex: "empPf",
  //   width: 150
  // },
  // {
  //   title: "个人所得税",
  //   dataIndex: "empTax",
  //   width: 150
  // },
  {
    title: "实发工资",
    dataIndex: "salaryReal",
    width: 150
  }
];
export default {
  name: "AddPayslipOne",
  components: {
    step: () => import("./step")
  },
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      spinning: true,
      columns: baseColumns,
      cbParams: {
        pageNo: 1,
        reloadCount: true,
        pageSize: 1000
      },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      titles: {
        countAll: 0,
        countInCompany: 0,
        countNotInCompany: 0,
        countWeChatBind: 0,
        countWeChatUnBind: 0,
        sumSalaryAmount: 0,
        sumSalaryReal: 0
      },
      dataSource: []
    };
  },
  computed: {
    ...mapState(["hr"]),
    wagePayrollList() {
      const temp = localStorage.getItem("tempWagePayroll");
      if (temp) {
        return JSON.parse(temp);
      } else {
        return null;
      }
    }
  },

  created() {
    this.getSalaryList();
  },

  methods: {
    // 下一步
    doNext() {
      const path = "add-payslip-second";
      this.$router.push({
        path,
        query: { ...this.$route.query, unSendCount: this.pagination.total }
      });
    },
    // 重新上传
    reUpload() {
      this.$router.push({ path: "/wages/add-payslip", query: { item: 2 } });
    },
    // 获取已上传工资条
    getSalaryList() {
      this.$request({
        url: `/hr/api/v1/salaryBills/pageRelation`,
        params: {
          companyId: this.hr.companyId,
          tableId: this.$route.query.tableId,
          reloadCount: true,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      }).then(({ data }) => {
        this.spinning = false;
        for (const key in this.titles) {
          this.titles[key] = data[key];
        }
        this.dataSource = data.salaryBillListVOPage.entities || [];
        this.pagination.total = data.salaryBillListVOPage.entityCount || 0;
        this.dataSource.forEach((item) => {
          item.salaryBillFieldsDOList.forEach((key) => {
            key.dataIndex = key.sort;
          });
        });
        const colum = [];
        this.dataSource[0].salaryBillFieldsDOList.map((key) => {
          colum.push({
            dataIndex: key.sort,
            title: key.fieldName,
            width: 150
          });
        });
        this.dataSource = this.dataSource.map((item) => {
          const obj = {};
          item.salaryBillFieldsDOList.map((key) => {
            obj[key["dataIndex"]] = key["fieldValue"];
          });
          item = { ...item, ...obj };
          return item;
        });
        // const filteredColumns = this.wagePayrollList
        //   ? baseColumns.filter((item) => this.wagePayrollList.includes(item.title))
        //   : baseColumns;
        this.columns = [...baseColumns, ...colum];
      });
    },
    // 筛选
    selectItem(type) {},
    // 翻页
    handlePage(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getSalaryList();
    }
  }
};
</script>

<style lang="scss" scoped>
.nameStyle {
  color: var(--primary);
  font-weight: 500;
}
.add-payslip-one {
  padding: 24px;
  .content-top {
    margin-top: 24px;
    padding: 40px 162px;
    background: #fafafa;
    border-radius: 4px;
  }
  .content-con {
    text-align: center;
    margin-top: 24px;
    padding: 40px 162px;
    background: #fafafa;
    border-radius: 4px;
    ::v-deep.form {
      text-align: center;
      .form-item {
        margin: 12px 0;
        text-align: left;
      }
    }
  }
  .content-foot {
    margin-top: 24px;
    padding: 24px;
    background: #fafafa;
    border-radius: 4px;
  }
  .salary {
    cursor: pointer;
    margin: 24px 0;
    .item {
      padding: 24px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }
  .foot {
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
  .sub_tit {
    font-weight: 500;
  }
}
</style>
